---
title: AssistantSidebar
---

import { Steps, Step } from "fumadocs-ui/components/steps";

## Overview

A chat sidebar show on the right side of the screen. Useful for co-pilot use cases.

## Getting Started

<Steps> 
  <Step>

### Add `assistant-sidebar`

```sh
npx shadcn@latest add "https://r.assistant-ui.com/assistant-sidebar"
```

This adds `/components/assistant-ui/assistant-sidebar.tsx` to your project, which you can adjust as needed.

  </Step>
  <Step>

### Use in your application

```tsx title="/app/page.tsx" {1,6}
import { AssistantSidebar } from "@/components/assistant-ui/assistant-sidebar";

export default function Home() {
  return (
    <div className="h-full">
      <AssistantSidebar>{/* your app */}</AssistantSidebar>
    </div>
  );
}
```

  </Step>
</Steps>
